<html><head><meta charset="utf-8"><title>09 使用接口定义几乎任意结构-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 2-6 09 使用接口定义几乎任意结构
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                09 使用接口定义几乎任意结构
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-12 16:37:17
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5cf3c4b700019bbd06400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">低头要有勇气，抬头要有底气。<p class="author">——韩寒</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们来学习接口，正如题目所说的，你可以使用接口定义几乎任意结构，本小节我们先来学习下接口的基本使用方法。</p>
</div><div class="cl-preview-section"><h3 id="基本用法">2.6.1. 基本用法</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们需要定义这样一个函数，参数是一个对象，里面包含两个字段：firstName 和 lastName，也就是英文的名和姓，然后返回一个拼接后的完整名字。来看下函数的定义：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token comment">// 注：这段代码为纯JavaScript代码，请在JavaScript开发环境编写下面代码，在TypeScript环境会报一些类型错误</span>
<span class="token keyword">const</span> <span class="token function-variable function">getFullName</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">使用时传入参数：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  firstName<span class="token punctuation">:</span> <span class="token string">"Lison"</span><span class="token punctuation">,</span>
  lastName<span class="token punctuation">:</span> <span class="token string">"Li"</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// =&gt; 'Lison Li'</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">没有问题，我们得到了拼接后的完整名字，但是使用这个函数的人如果传入一些不是很理想的参数时，就会导致各种结果：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.</span>
<span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token punctuation">{</span> age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> phone<span class="token punctuation">:</span> <span class="token string">"13312345678"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'undefined undefined'</span>
<span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token punctuation">{</span> firstName<span class="token punctuation">:</span> <span class="token string">"Lison"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Lison undefined'</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这些都是我们不想要的，在开发时难免会传入错误的参数，所以 TypeScript 能够帮我们在编译阶段就检测到这些错误。我们来完善下这个函数的定义：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">const</span> getFullName <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  firstName<span class="token punctuation">,</span>
  lastName<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment">// 指定这个参数的类型，因为他是一个对象，所以这里来指定对象中每个字段的类型</span>
  firstName<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span> <span class="token comment">// 指定属性名为firstName和lastName的字段的属性值必须为string类型</span>
  lastName<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们通过对象字面量的形式去限定我们传入的这个对象的结构，现在再来看下之前的调用会出现什么提示：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 应有1个参数，但获得0个</span>
<span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token punctuation">{</span> age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> phone<span class="token punctuation">:</span> <span class="token number">123456789</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 类型“{ age: number; phone: number; }”的参数不能赋给类型“{ firstName: string; lastName: string; }”的参数。</span>
<span class="token function">getFullName</span><span class="token punctuation">(</span><span class="token punctuation">{</span> firstName<span class="token punctuation">:</span> <span class="token string">"Lison"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 缺少必要属性lastName</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这些都是在我们编写代码的时候 TypeScript 提示给我们的错误信息，这样就避免了在使用函数的时候传入不正确的参数。接下来我们用这节课要讲的接口来书写上面的规则，我们使用<code>interface</code>来定义接口：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
  firstName<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  lastName<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">getFullName</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span><span class="token punctuation">:</span> Info<span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">注意在定义接口的时候，你不要把它理解为是在定义一个对象，而要理解为{}括号包裹的是一个代码块，里面是一条条声明语句，只不过声明的不是变量的值而是类型。声明也不用等号赋值，而是冒号指定类型。每条声明之前用换行分隔即可，或者也可以使用分号或者逗号，都是可以的。</p>
</div><div class="cl-preview-section"><h3 id="可选属性">2.6.2.可选属性</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当我们定义一些结构的时候，一些结构对于某些字段的要求是可选的，有这个字段就做处理，没有就忽略，所以针对这种情况，<em>typescript</em>为我们提供了可选属性。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们先定义一个描述传入蔬菜信息的句子的函数：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">const</span> <span class="token function-variable function">getVegetables</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> color<span class="token punctuation">,</span> <span class="token keyword">type</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`A </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color <span class="token operator">?</span> color <span class="token operator">+</span> <span class="token string">" "</span> <span class="token punctuation">:</span> <span class="token string">""</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们可以看到这个函数中根据传入对象中的 color 和 type 来进行描述返回一句话，color 是可选的，所以我们可以给接口设置可选属性，在属性名后面加个<code>?</code>即可：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Vegetables</span> <span class="token punctuation">{</span>
  color<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">这里可能 tslint 会报一个警告，告诉我们接口应该以大写的<code>i</code>开头，如果你想关闭这条规则，可以在 tslint.json 的 rules 里添加<code>"interface-name": [true, “never-prefix”]</code>来关闭。</p>
</blockquote>
</div><div class="cl-preview-section"><h3 id="多余属性检查">2.6.3.多余属性检查</h3>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token function">getVegetables</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token string">"tomato"</span><span class="token punctuation">,</span>
  size<span class="token punctuation">:</span> <span class="token string">"big"</span> <span class="token comment">// 'size'不在类型'Vegetables'中</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们看到，传入的参数没有 color 属性，但也没有错误，因为它是可选属性。但是我们多传入了一个 size 属性，这同样会报错，TypeScript 会告诉你，接口上不存在你多余的这个属性。只要接口中没有定义这个属性，就会报错，但如果你定义了可选属性 size，那么上面的例子就不会报错。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">这里可能 tslint 会报一个警告，告诉我们属性名没有按开头字母顺序排列属性列表，如果你想关闭这条规则，可以在 tslint.json 的 rules 里添加<code>"object-literal-sort-keys": [false]</code>来关闭。</p>
</blockquote>
</div><div class="cl-preview-section"><h3 id="绕开多余属性检查">2.6.4.绕开多余属性检查</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">有时我们并不希望 TypeScript 这么严格地对我们的数据进行检查，比如我们只需要保证传入<code>getVegetables</code>的对象有<code>type</code>属性就可以了，至于实际使用的时候传入对象有没有多余的属性，多余属性的属性值是什么类型，这些都无所谓，那就需要绕开多余属性检查，有如下三个方法：</p>
</div><div class="cl-preview-section"><h4 id="使用类型断言" style="font-size: 26px;">(1) 使用类型断言</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在基础类型中讲过，类型断言就是用来明确告诉 TypeScript，我们已经自行进行了检查，确保这个类型没有问题，希望 TypeScript 对此不进行检查，所以最简单的方式就是使用类型断言：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Vegetables</span> <span class="token punctuation">{</span>
  color<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">getVegetables</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> color<span class="token punctuation">,</span> <span class="token keyword">type</span> <span class="token punctuation">}</span><span class="token punctuation">:</span> Vegetables<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`A </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color <span class="token operator">?</span> color <span class="token operator">+</span> <span class="token string">" "</span> <span class="token punctuation">:</span> <span class="token string">""</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">getVegetables</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token string">"tomato"</span><span class="token punctuation">,</span>
  size<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
  price<span class="token punctuation">:</span> <span class="token number">1.2</span>
<span class="token punctuation">}</span> <span class="token keyword">as</span> Vegetables<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="添加索引签名" style="font-size: 26px;">(2) 添加索引签名</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">更好的方式是添加字符串索引签名，索引签名我们会在后面讲解，先来看怎么实现：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Vegetables</span> <span class="token punctuation">{</span>
  color<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  <span class="token punctuation">[</span>prop<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">getVegetables</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> color<span class="token punctuation">,</span> <span class="token keyword">type</span> <span class="token punctuation">}</span><span class="token punctuation">:</span> Vegetables<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`A </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color <span class="token operator">?</span> color <span class="token operator">+</span> <span class="token string">" "</span> <span class="token punctuation">:</span> <span class="token string">""</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">getVegetables</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  color<span class="token punctuation">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span>
  <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token string">"tomato"</span><span class="token punctuation">,</span>
  size<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
  price<span class="token punctuation">:</span> <span class="token number">1.2</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="利用类型兼容性" style="font-size: 26px;">(3) 利用类型兼容性</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这种方法现在还不是很好理解，也是不推荐使用的，先来看写法：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Vegetables</span> <span class="token punctuation">{</span>
  <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">getVegetables</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token keyword">type</span> <span class="token punctuation">}</span><span class="token punctuation">:</span> Vegetables<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`A </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token string">"tomato"</span><span class="token punctuation">,</span> size<span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">getVegetables</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面这种方法完美通过检查，我们将对象字面量赋给一个变量<code>option</code>，然后<code>getVegetables</code>传入 <code>option</code>，这时没有报错。是因为直接将对象字面量传入函数，和先赋给变量再将变量传入函数，这两种检查机制是不一样的，后者是因为类型兼容性。我们后面会有专门一节来讲类型兼容性。简单地来说：如果 b 要赋值给 a，那要求 b 至少需要与 a 有相同的属性，多了无所谓。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在上面这个例子中，<code>option</code>的类型应该是<code>Vegetables</code>类型，对象<code>{ type: ‘tomato’, size: 12 }</code>要赋值给 <code>option</code>，<code>option</code>中所有的属性在这个对象字面量中都有，所以这个对象的类型和<code>option</code>(也就是<code>Vegetables</code>类型)是兼容的，所以上面例子不会报错。如果你现在还想不明白没关系，我们还会在后面详细去讲。</p>
</div><div class="cl-preview-section"><h3 id="只读属性">2.6.5.只读属性</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接口也可以设置只读属性，如下：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Role</span> <span class="token punctuation">{</span>
  readonly <span class="token number">0</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  readonly <span class="token number">1</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里我们定义了一个角色字典，有 0 和 1 两种角色 id。下面我们定义一个实际的角色  数据，然后来试图修改一下它的值：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">const</span> role<span class="token punctuation">:</span> Role <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token number">0</span><span class="token punctuation">:</span> <span class="token string">"super_admin"</span><span class="token punctuation">,</span>
  <span class="token number">1</span><span class="token punctuation">:</span> <span class="token string">"admin"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
role<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"super_admin"</span><span class="token punctuation">;</span> <span class="token comment">// Cannot assign to '0' because it is a read-only property</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们看到 TypeScript 告诉我们不能分配给索引0，因为它是只读属性。设置一个值只读，我们是否想到ES6里定义常量的关键字<code>const</code>？使用<code>const</code>定义的常量定义之后不能再修改，这有点只读的意思。那<code>readonly</code>和<code>const</code>在使用时该如何选择呢？这主要看你这个值的用途，如果是定义一个常量，那用<code>const</code>，如果这个值是作为对象的属性，那请用<code>readonly</code>。我们来看下面的代码：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">const</span> NAME<span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token operator">=</span> <span class="token string">"Lison"</span><span class="token punctuation">;</span>
NAME <span class="token operator">=</span> <span class="token string">"Haha"</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught TypeError: Assignment to constant variable</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">"lison"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"Haha"</span><span class="token punctuation">;</span>

<span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
  readonly name<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> info<span class="token punctuation">:</span> Info <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">"Lison"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
info<span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"Haha"</span><span class="token punctuation">;</span> <span class="token comment">// Cannot assign to 'name' because it is a read-only property</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们可以看到上面使用<code>const</code>定义的常量<code>NAME</code>定义之后再修改会报错，但是如果使用<code>const</code>定义一个对象，然后修改对象里属性的值是不会报错的。所以如果我们要保证对象的属性值不可修改，需要使用<code>readonly</code>。</p>
</div><div class="cl-preview-section"><h3 id="函数类型">2.6.6.函数类型</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接口可以描述普通对象，还可以描述函数类型，我们先看写法：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">AddFunc</span> <span class="token punctuation">{</span>
  <span class="token punctuation">(</span>num1<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">,</span> num2<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里我们定义了一个AddFunc结构，这个结构要求实现这个结构的值，必须包含一个和结构里定义的函数一样参数、一样返回值的方法，或者这个值就是符合这个函数要求的函数。我们管花括号里包着的内容为<em>调用签名</em>，它由带有参数类型的参数列表和返回值类型组成。后面学到<strong>类型别名</strong>一节时我们还会学习其他写法。来看下如何使用：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">const</span> add<span class="token punctuation">:</span> <span class="token function-variable function">AddFunc</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n1<span class="token punctuation">,</span> n2<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> n1 <span class="token operator">+</span> n2<span class="token punctuation">;</span>
<span class="token keyword">const</span> join<span class="token punctuation">:</span> <span class="token function-variable function">AddFunc</span> <span class="token operator">=</span> <span class="token punctuation">(</span>n1<span class="token punctuation">,</span> n2<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>n1<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>n2<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// 不能将类型'string'分配给类型'number'</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 类型'string'的参数不能赋给类型'number'的参数</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面我们定义的add函数接收两个数值类型的参数，返回的结果也是数值类型，所以没有问题。而join函数参数类型没错，但是返回的是字符串，所以会报错。而当我们调用add函数时，传入的参数如果和接口定义的类型不一致，也会报错。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">你应该注意到了，实际定义函数的时候，名字是无需和接口中参数名相同的，只需要位置对应即可。</p>
</div><div class="cl-preview-section"><h2 id="小结" style="font-size: 30px;">小结</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们学习了接口的一些基本定义和用法，通过使用接口，我们可以定义绝大部分的数据结构，从而限定值的结构。我们可以通过修饰符来指定结构中某个字段的可选性和只读性，以及默认情况下必选性。而接口的校验是严格的，在定义一个实现某个接口的值的时候，对于接口中没有定义的字段是不允许出现的，我们称这个为多余属性检查；同时我们讲了三种绕过多余属性检查的方法，来满足程序的灵活性。最后我们学习了如何通过接口，来定义函数类型，当然我们后面还会学习其他定义函数类型的方法。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节，我们将学习接口的高级用法，学习完之后，除了涉及到<em>类</em>的知识的部分外，你就掌握了接口的所有知识。<br>
<img src="http://img.mukewang.com/5cf4bfd200012bae16000820.jpg" alt="图片描述" data-original="http://img.mukewang.com/5cf4bfd200012bae16000820.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/345">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    08 使用类型断言达到预期
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/347">
                                                    <div class="next r clearfix">
                                <p>
                                    10 接口的高阶用法
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>